<template>
  <div>
    <a-modal
      title="标签设置"
      :visible="showTags"
      @cancel="hideModal"
      :footer="null"
      @confirmLoading="modelLoading"
      width="660px"
    >
      <a-spin :spinning="modelLoading">
        <div class="addTags">
          <a-alert message="标签管理是校区内公有标签，添加新的标签后，其他同事也可见可用。删除时请谨慎删除" style="font-size:12px;margin-bottom:10px;" banner ></a-alert>
          <a-input-search @search="add()" v-model="addText" style="width:280px;">
            <a-button slot="enterButton">添加标签</a-button>
          </a-input-search>
        </div>
        <div class="tagsAll" v-if="data.length>0">
          <a-tag v-for="(item,index) in data" :key="index">
            <span class="tag_content">{{item.content}}</span>
            <a-icon type="close" class="tagClose" @click="closeTag(item.id)" />
          </a-tag>
        </div>
      </a-spin>
    </a-modal>
  </div>
</template>
<script>
import { tagList, tagAdd, tagDel } from '@/api/tag'
import { deepClone } from '@/utils/pub_methods_base'
export default {
  name: 'tagsModel',
  props: {},
  data() {
    return {
      //弹框数据
      schoolID: null,
      showTags: false,
      addTagModel: false,
      modelLoading: false,
      tagNames: [''],
      addText: '',
      data: [
        {
          id: null,
          content: null
        }
      ]
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    }
  },
  created() {
    this.tableLoading = true
    this.schoolID = this.$store.state.user.school
    tagList({ pageSize: 999999,school_id:this.$store.state.user.school }).then(res => {
      this.data = res.data
      this.tableLoading = false
    })
  },
  watch: {},
  methods: {
    add() {
      if (this.addText == '') {
        return
      }
      this.modelLoading = true
      tagAdd({
        content: this.addText,
        school_id: this.schoolID
      })
        .then(res => {
          this.addText = ''
          this.$message.success('添加成功')
          this.modelLoading = false
          tagList({ pageSize: 999999,school_id:this.$store.state.user.school }).then(result => {
            this.data = result.data
          })
        })
        .catch(er => {
          this.$message.success('添加失败')
          this.modelLoading = false
        })
    },
    hideModal() {
      this.showTags = false
      this.$emit('reload')
    },
    showModal() {
      tagList({ pageSize: 9999999,school_id:this.$store.state.user.school }).then(res => {
        this.data = res.data
      })
      this.showTags = true
    },
    closeTag(e) {
      this.modelLoading = true
      tagDel(e)
        .then(res => {
          this.$message.success('删除成功')
          this.modelLoading = false
          tagList({ pageSize: 999999,school_id:this.$store.state.user.school }).then(result => {
            this.data = result.data
          })
        })
        .catch(er => {
          this.$message.success('删除失败')
          this.modelLoading = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
.tagsAll {
  margin-top: 10px;
  .ant-tag {
    margin-bottom: 10px;
    .tag_content {
      margin-top: 4px;
      display: inline-block;
      max-width: 400px;
      white-space: nowrap; /*超出的空白区域不换行*/
      overflow: hidden; /*超出隐藏*/
      text-overflow: ellipsis; /*文本超出显示省略号*/
    }
    .tagClose {
      vertical-align: top;
      margin-top: 4px;
    }
  }
}
</style>